<template>
  <div>
    <header>
      <h4>
        <span>
          <van-icon @click="$router.push('/train')" name="arrow-left" />
        </span>
        <p>
          <a
            v-for="v in types"
            :key="v"
            :class="type === v ? 'active' : ''"
            @click="
              () => {
                type = v;
              }
            "
          >
            {{ v }} >
          </a>
        </p>
      </h4>
      <dl>
        <dd class="con" @click="$router.push('/train')">
          <van-row class="col">
            <van-col :span="8">
              {{ list.values.line }}
            </van-col>
            <van-col :span="8">
              {{ list.values.train }}
            </van-col>
            <van-col :span="8">
              {{ list.values.line1 }}
            </van-col>
          </van-row>
          <van-row class="cel">
            <van-col :span="8">
              {{ list.values.time }}
            </van-col>
            <van-col :span="8">
              <!-- {{  list.values.time.slice(0, 2) + "小时" +  list.values.time.slice(3, 4) + "分" }} -->
            </van-col>
            <van-col :span="8">
              {{ list.values.time1 }}
            </van-col>
          </van-row>
        </dd>
        <dd class="con">
          <van-row class="cel">
            <van-col :span="8"> 一等有票</van-col>
            <van-col :span="8"> 二等有票</van-col>
            <van-col :span="8"> 商务 {{ list.values.car }} </van-col>
          </van-row>
        </dd>
      </dl>
    </header>
    <div v-if="type === '选择坐席'">
      <div class="con1">
        <a> 二等座 </a>
        <a> $56 </a>
        <a> 有票 </a>
        <van-button size="small" type="warning">预定</van-button>
      </div>
      <div class="con1">
        <a> 一等座 </a>
        <a> $75 </a>
        <a> 有票 </a>
        <van-button size="small" type="warning">预定</van-button>
      </div>
      <div class="con1">
        <a> 商务座 </a>
        <a> $56 </a>
        <a> 有票 </a>
        <van-button size="small" type="warning">预定</van-button>
      </div>
    </div>
    <div v-if="type === '选择乘客'" class="con2">
      <van-cell-group inset>
        <van-field
          v-model="form.name"
          label="乘客姓名"
          placeholder="请输入乘客姓名"
        />
      </van-cell-group>
      <br />
      <br />
      <br />
      <a @click="$router.push('/addtrain')"> 添加乘客 </a>
      <h4>选择坐席 <a> *优先按指定位置出席 </a></h4>
      <van-row class="seat">
        <van-col :span="8">
          <a> 靠 窗 </a>
          <van-icon name="user-circle-o" />
          <van-icon name="user-circle-o" />
          <van-icon name="user-circle-o" />
        </van-col>
        <van-col :span="8">
          <a> 过道 </a>
          <van-icon name="user-circle-o" />
          <van-icon name="user-circle-o" />
          <a> 靠窗 </a>
        </van-col>
      </van-row>
      <van-cell-group inset>
        <van-field
          v-model="form.mobile"
          label="乘客手机号"
          placeholder="请输入乘客手机号"
        />
      </van-cell-group>
      <van-button type="warning" @click="showPopup"> 预定 </van-button>
    </div>
    <div v-if="type === '占座支付'" class="con2">
      <van-cell-group inset>
        <van-field
          v-model="form.name"
          label="乘客姓名"
          placeholder="请输入乘客姓名"
        />
      </van-cell-group>
      <br />
      <br />
      <br />
      <a @click="$router.push('/addtrain')"> 添加乘客 </a>
      <h4>选择坐席 <a> *优先按指定位置出席 </a></h4>
      <van-row class="seat">
        <van-col :span="8">
          <a> 靠 窗 </a>
          <van-icon name="user-circle-o" />
          <van-icon name="user-circle-o" />
          <van-icon name="user-circle-o" />
        </van-col>
        <van-col :span="8">
          <a> 过道 </a>
          <van-icon name="user-circle-o" />
          <van-icon name="user-circle-o" />
          <a> 靠窗 </a>
        </van-col>
      </van-row>
      <van-cell-group inset>
        <van-field
          v-model="form.mobile"
          label="乘客手机号"
          placeholder="请输入乘客手机号"
        />
      </van-cell-group>
      <van-button type="warning" @click="showPopup, (type = '占座支付')">
        预定
      </van-button>
    </div>
    <van-popup
      v-model:show="show"
      class="mask"
      :style="{
        padding: '10px',
        height: '30%',
        width: '80%',
        fontSize: '20px',
        lineHeight: '30px',
        textAlign: 'center',
      }"
    >
      <p>
        <a> 车次信息 </a>
        {{ list.values.line }}- {{ list.values.line1 }} &emsp;
        {{ list.values.train }}
      </p>
      <p></p>
      <p>
        <a> 乘车人 </a>
        {{ form.name }}
      </p>
      <p>
        <a> 乘车时间 </a>
        {{ list.values.time }}
      </p>
    </van-popup>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "@vue/runtime-core";
import { GetUrl } from "@/request/request";
import { useRoute } from "vue-router";
import "vant/es/toast/style";
import Mock from "mockjs";
export default {
  data() {
    return {
      type: "选择乘客",
      types: ["选择坐席", "选择乘客", "占座支付"],
      num: Mock.mock("@integer(10,60)"),
    };
  },
  setup(props, context) {
    // 父组件传给子组件的 参数
    const { attrs, slots, emit } = context;
    const date = ref("2022-12-26");
    const list = reactive([]);
    const router = useRoute();
    const show = ref(false);
    const id = router.params.id;
    const form = reactive({
      mobile: "",
      name: "",
    });
    const city1 = ref(JSON.parse(localStorage.getItem("city1")));
    async function getlist() {
      const res = await GetUrl("/detail", { id: id });
      console.log(res.data);
      list.values = { ...res.data.data };
    }
    const showPopup = () => {
      show.value = true;
    };
    function add() {
      console.log(form.values);
    }
    onMounted(() => {
      getlist();
    });
    return {
      list,
      getlist,
      form,
      city1,
      show,
      showPopup,
      date,
    };
  },
};
</script>
<style scoped  lang='scss' >
header {
  background-color: cadetblue;
  height: 170px;
  width: 100%;
  color: white;
  h4 {
    line-height: 30px;
    padding: 10px;
  }
  p {
    float: left;
    line-height: 30px;
    margin-top: -5px;
    margin-left: 10px;
    font-size: 14px;
    a {
      display: inline-block;
      width: 68px;
    }
    a.active {
      color: #ccc;
    }
  }
  i {
    float: left;
    background-color: white;
    color: #000;
    border-radius: 50%;
    padding: 3px;
  }
}
.row {
  text-align: center;
  font-size: 20px;
  line-height: 50px;
}
.con {
  width: 97%;
  overflow: hidden;
  margin: 0px auto;
  margin-left: 7px;
  line-height: 37px;
  .col {
    text-align: center;
    font-size: 16px;
    width: 94%;
    border-bottom: solid 1px #ccc;
  }
  .cel {
    font-size: 17px;
    text-align: center;
    margin-left: -23px;
  }
}

dl {
  //   border: solid 1px #ccc;
  padding: 10px;
  width: 90%;
  margin: 10px auto;
  border-radius: 10px;
  h4 {
    float: right;
    margin-top: -40px;
    font-size: 20px;
    color: orange;
    font-weight: normal;
  }
}
.con1 {
  display: flex;
  justify-content: space-around;
  width: 100%;
  font-size: 16px;
  line-height: 40px;
  margin-top: 10px;
}
.con2 {
  a {
    padding-left: 10px;
    color: blue;
  }
  button {
    width: 90%;
    margin-left: 20px;
  }
  h4 {
    padding: 10px;
    height: 30px;
    font-size: 15px;
    border-top: solid 5px #f4f4f4;
    margin-top: 10px;
    line-height: 30px;
    a {
      color: #000;
      display: block;
      font-size: 9px;
    }
  }
}
.seat {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 35px;
  margin-bottom: 20px;
  i {
    margin-right: 5px;
  }
  a {
    width: 25px;
    margin-top: 3px;
    margin-left: -14px;
    display: inline-block;
    font-size: 13px;
    color: gray;
  }
  font-size: 31px;
}
.mask{
    a{
        text-align: left;
        font-size: 14px;
        display: block;
        color: gray;
    }
}
</style>